<template>
    <view
      :style="'direction:' + $t('dir')"
      :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'"
    >
      <navbar
        :slotRight="true"
        :back="true"
        :customStyle="';background: #fff;'"
        :titleColor="'color: #fff ;'"
        :backColor="'#000'"
      >
        <view slot="right" class="row items-center">
          <view class="post-button" @click="toggleButton">
            <icon type="search" class="shake" color="#000" size="15"></icon>
            <text>
              {{ $t("dir") == "rtl" ? "شەرىتلىك ئىزدەش" : "条件搜索" }}
            </text>
          </view>
        </view>
      </navbar>
  
      <view class="main">
        <view style="padding-bottom: 130rpx; min-height: 1200rpx">
          <view
            class="d-flex flex-wrap items-center justify-center"
            style="margin-top: 10rpx"
          >
            <house-row
              v-for="(item, i) in dataList.data"
              :item="item"
              :key="i"
              @click="toDetail(item)"
            />
          </view>
          <u-empty
            v-if="
              dataList &&
              dataList.length == 0 &&
              dataList.loadmoreStatus != 'loading'
            "
            mode="list"
            icon="/static/images/empty.png"
            :text="$t('no_content')"
            style="padding-top: 250rpx"
          />
          <u-loadmore
            v-else
            :status="dataList.loadmoreStatus"
            :loading-text="$t('loadingText')"
            loadmore-text="."
            nomoreText="."
            :isDot="true"
            :line="dataList.loadmoreStatus == 'nomore'"
            color="#bfbfbf"
          />
        </view>
      </view>
      <!-- izdax -->
      <u-popup
        :show="showSearchPopup"
        @close="showSearchPopup = false"
        mode="bottom"
        :customStyle="{
          backgroundColor: '#ffffff',
          borderTopLeftRadius: '24rpx',
          borderTopRightRadius: '24rpx',
          height: '75vh',
        }"
      >
        <view class="search-popup">
          <view class="action-buttons">
            <view class="action-btn cancel-btn" @click.stop="confirmSearch">
              <view class="search-btn-content">
                <image
                  src="https://appcdn.uqrixayli.com/mini-app/search.png"
                  class="search-icon"
                />
                <text class="btn-text">{{ $t("izdax") }}</text>
              </view>
            </view>
            <view class="action-btn search-btn" @click="showSearchPopup = false">
              <text>{{ $t("qekinix") }}</text>
            </view>
          </view>
          <!-- mazmun  -->
          <scroll-view class="mazmun" scroll-y style="max-height: 60vh">
            <!-- orun -->
            <view class="filter-section">
              <view class="section-header">
                <view class="title-box">
                  <view class="title-icon"></view>
                  <text class="section-title"> {{ $t("orni") }}</text>
                </view>
              </view>
              <view class="city-row">
                <view
                  v-for="item in orunList"
                  :key="item.value"
                  class="city-item"
                  :class="{ active: selectedOrun === item.value }"
                  @tap="selectedOrun = item.value"
                >
                  <text>{{
                    $t("dir") == "rtl" ? item.label : item.labelCn
                  }}</text>
                </view>
              </view>
            </view>
  

          </scroll-view>
          <!-- reset -->
          <view class="search-buttons">
            <view class="reset-btn" @click="resetSearch">
              <text>{{ $t("tazlax") }}</text>
            </view>
          </view>
        </view>
      </u-popup>
      <u-back-top :scroll-top="scrollTop" />
    </view>
  </template>
          <script>
  export default {
    data() {
      return {
        type: null,
        showSearchPopup: false,
        dataList: {
          current_page: 1,
          data: [],
          last_page: 1,
          loadmoreStatus: "loadmore",
        },
        scrollTop: 0,
        orunList: [
          {
            Code: "658410",
            labelCn: "库尔勒市",
            label: "كورلا شەھىرى",
            value: 1,
          },
          {
            Code: "658410",
            labelCn: "轮台县",
            label: "بۈگۈر",
            value: 2,
          },
          {
            Code: "658410",
            labelCn: "尉犁",
            label: "لوپنۇر",
            value: 3,
          },
          {
            Code: "658410",
            labelCn: "若羌县",
            label: "چاقىلىق",
            value: 4,
          },
          {
            Code: "658410",
            labelCn: "且末县",
            label: "چەرچەن",
            value: 5,
          },
          {
            Code: "658410",
            labelCn: "焉耆",
            label: "قاراشەھەر",
            value: 6,
          },
          {
            Code: "658410",
            labelCn: "和静县",
            label: "خېجىڭ",
            value: 7,
          },
          {
            Code: "658410",
            labelCn: "和硕县",
            label: "خوشۇت",
            value: 8,
          },
          {
            Code: "658410",
            labelCn: "博湖",
            label: "باغراش",
            value: 9,
          },
          { value: null, label: "بارلىق رايون", labelCn: "全部" },
        ],
        selectedOrun: null,
        selectedKawat: null,
        selectedKariz: null,
        selectedBizak: null,
        selectedEjara: null,
      };
    },
    onLoad(e) {
      this.type = e.id;
      console.log("e", e, this.type);
    this._subid = e.id;
      this._indexPage();
    },
    onShow() {},
    async onPullDownRefresh() {
      await this._index();
      this.dataList.current_page = 1;
      await this._indexPage();
      uni.stopPullDownRefresh();
    },
    onReachBottom() {},
    async onReachBottom() {
      if (this.dataList.current_page < this.dataList.last_page) {
        this.dataList.current_page += 1;
        await this._indexPage();
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    methods: {
      resetSearch() {
        this.selectedOrun = null;
        this.selectedAsliha = null;
        this.kolam = [0, 600];
        // this.listAll = []; 清楚列表
        // this.getInfo(); 重新获取api
      },
      toggleButton() {
        this.showSearchPopup = true;
      },
      async confirmSearch() {
        this.showSearchPopup = false;
        this.dataList.current_page = 1;
        this.dataList.loadmoreStatus = "loading";
        
        let params = {
          page: this.dataList.current_page,
          pageSize: 10,
          _id: 8,
          _subid: this._subid,
          address: this.selectedOrun      // رايون
        };

        await this.$uniapi("/get_info_list", params)
          .then((res) => {
            this.dataList.loadmoreStatus = "loadmore";
            if (res.code == 200) {
              let uqur = res.list;
              this.dataList.data = uqur.data;
              this.dataList.current_page = uqur.current_page;
              this.dataList.last_page = uqur.last_page;
              if (uqur.current_page == uqur.last_page)
                this.dataList.loadmoreStatus = "nomore";
            }
          })
          .catch((err) => {
            this.dataList.loadmoreStatus = "loadmore";
          });
      },
      async _indexPage() {
        this.dataList.loadmoreStatus = "loading";
        let page = this.dataList.current_page;
        let params = {
          page: page,
          pageSize: 10,
          _id: 8,
          _subid:this._subid
        };
        await this.$uniapi("/get_info_list", params)
          .then((res) => {
            this.dataList.loadmoreStatus = "loadmore";
            if (res.code == 200) {
              let uqur = res.list;

              if (page == 1) {
                this.dataList.data = uqur.data;
                console.log("uqur", uqur.data);
              } else this.dataList.data.push(...uqur.data);
              this.dataList.current_page = uqur.current_page;
              this.dataList.last_page = uqur.last_page;
              if (uqur.current_page == uqur.last_page)
                this.dataList.loadmoreStatus = "nomore";
            }
          })
          .catch((err) => {
            this.dataList.loadmoreStatus = "loadmore";
          });
      },
    },
  };
  </script>
          <style lang="scss">
  .grid-text {
    font-size: 14px;
    color: #000;
    padding: 10rpx 0 20rpx 0rpx;
    /* #ifndef APP-PLUS */
    box-sizing: border-box;
    /* #endif */
  }
  .post-button {
    display: flex;
    height: 46.96rpx;
    padding: 4px 10px;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    border-radius: 51.84rpx;
    border: 1px solid rgba(0, 0, 0, 0.134);
    color: #000000;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
    .u_pink {
      width: 42.08rpx;
      height: 42.08rpx;
      aspect-ratio: 1/1;
    }
  }
  .shake {
    display: inline-block;
    animation: shake 2s infinite;
  }
  
  @keyframes shake {
    0% {
      transform: translate(1px, 0);
    }
    25% {
      transform: translate(-1px, 0);
    }
    50% {
      transform: translate(1px, 0);
    }
    75% {
      transform: translate(-1px, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  .search-popup {
    padding: 30rpx;
  }
  .action-btn {
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
  }
  .cancel-btn {
    background: #455ef7;
    color: #fff;
  
    .search-btn-content {
      display: flex;
      align-items: center;
  
      .search-icon {
        width: 36rpx;
        height: 36rpx;
        margin-left: 10rpx;
      }
    }
  }
  .action-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }
  .search-btn {
    background: #f5f5f5;
    color: #666;
  }
  .search-buttons {
    margin-top: 40rpx;
  
    .reset-btn {
      width: 100%;
      height: 68rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      border-radius: 40rpx;
      font-size: 28rpx;
      color: #666;
    }
  }
  .filter-section {
    margin-bottom: 40rpx;
  }
  
  .section-header {
    margin-bottom: 10rpx;
  
    .title-box {
      display: flex;
      align-items: center;
  
      .title-icon {
        width: 8rpx;
        height: 32rpx;
        background: #455ef7;
        border-radius: 4rpx;
      }
  
      .section-title {
        margin: 10rpx 20rpx;
        font-size: 32rpx;
        font-weight: bold;
      }
    }
  }
  .city-row {
    margin-bottom: 10rpx;
    position: relative;
    // height: 74rpx;
    // overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    // align-items: center;
  }
  
  .city-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150rpx;
    padding: 8rpx 30rpx;
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #455ef7;
    background: rgba(245, 245, 245, 0.5);
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 30rpx;
    border: 1rpx solid #455ef7;
  }
  
  /* 选中项样式 */
  .city-item.active {
    color: #fff;
    font-size: 28rpx;
    font-weight: 500;
    // transform: scale(1.05);
    background: #455ef7;
  }
  
  /* 未选中项的渐变效果 */
  .city-item:not(.active) {
    opacity: 0.8;
    transform: scale(0.95);
  }
  
  /* 两侧渐变遮罩 */
  .city-row::before,
  .city-row::after {
    content: "";
    position: absolute;
    top: 0;
    width: 30%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }
  
  /* چېكىلگەندىكى ئۈنۈم */
  .city-item:active {
    transition: all 0.1s ease;
  }
  .slider_info {
    display: flex;
    justify-content: center;
    margin-bottom: 5rpx;
  }
  .slider_value {
    color: #455ef7;
    padding: 0 10rpx;
  }
  </style>
        